<template>
  <el-row :gutter="20" class="upload">
    <el-col :span="24">
      <div style="float: left">
        <h-pictrue-list :files="uploadFiles"></h-pictrue-list>
      </div>
      <div style="float: left">
        <el-upload
          :action="action"
          :list-type="listtype"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :data="params"
          :on-success="onSuccess"
          :on-error="onError"
          :file-list="uploadFiles"
          :show-file-list="showfiles"
          :before-upload="beforeUpload"
          :class="classStyle"
          :on-progress="onProgress"
        >
          <slot>
            <i class="el-icon-plus"></i>
          </slot>
        </el-upload>
      </div>
    </el-col>
    <el-dialog :visible.sync="dialogVisible" title="预览" append-to-body>
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </el-row>
</template>
<script>
  import UploadMix from 'src/components/common/js/upload-mix'
  import HPictrueList from 'src/components/common/HPictureList'

  export default {
    name: 'HUpload',
    components: {HPictrueList},
    mixins: [UploadMix],
    data() {
      return {
        uploadFiles: [],
        dialogVisible: false,
        dialogImageUrl: '',
        tempIndex: 0
      }
    },
    props: {
      files: {
        type: Array
      },
      classStyle: {
        type: String,
        default: ''
      },
      owner: {
        type: String,
        default: 'brand'
      },
      single: {
        type: Boolean,
        default: false
      },
      limit: {
        type: Number,
        default: 1
      },
      showfiles: {
        type: Boolean,
        default: false
      },
      listtype: {
        type: String,
        default: 'text'
      }
    },
    watch: {
      files: {
        immediate: true,
        handler(files) {
          this.uploadFiles = files.map(item => {
            if (typeof item == 'string') {
              return {
                uid: (Date.now() + this.tempIndex++),
                status: 'success',
                url: item
              }
            } else {
              item.uid = item.uid || (Date.now() + this.tempIndex++)
              item.status = 'success'
            }
            return item
          })
        }
      }
    },
    methods: {
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url
        this.dialogVisible = true
      },
      onSuccess: function (response, file, fileList) {
        if (response != null && response.code === 0) {
          const data = response.datas[0]
          if (this.limit === 1) {
            this.files.splice(0, 1, data)
          } else {
            this.files.push(data)
          }
        } else {
          this.$message.error('上传失败请重新尝试.')
        }
      },
      onProgress: function (event, file, fileList) {
        if (file.status === 'ready') {
          file.status = 'uploading'
          file.percentage = event.percent || 0
          if (this.limit === 1) {
            this.uploadFiles.splice(0, 1, file)
          } else {
            this.uploadFiles.push(file)
          }
        }
      },
      onError: function (err, file, fileList) {
        const index = fileList.indexOf(file)
        if (index > -1) {
          this.uploadFiles.splice(index, 1, file)
        }
        this.$message.error(err)
      },
      handleRemove(file, fileList) {
        const index = fileList.indexOf(file)
        if (index > -1) {
          this.files.splice(index, 1)
        }
      }
    }
  }
</script>
